<template>
  <view class="topNav" :style="{ 'height': menuButton.top + 'px' }"></view>
  <view class="content">
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="activeIndex == index ? 'active' : ''"
        @click="changeTab(index)">
        {{ tab.name }}
      </view>
      <view class="tab-line" :style="underlineStyle"></view>
    </view>
  </view>
  <Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
</template>

<script>
import Tabbar from "@/components/pageFooter/index.vue"
export default {
  components: {
    Tabbar
  },
  data() {
    return {
      menuButton: {},
      tabbarIndex: 3,
      tabs: [
        { name: '当前订单' },
        { name: '历史订单' }
      ],
      activeIndex: 1,
      underlineStyle: {}
    }
  },
  mounted() {
    let menuButton = uni.getMenuButtonBoundingClientRect();
    this.menuButton = menuButton;
    this.$nextTick(() => {
      setTimeout(() => this.showLine(), 100);
    })

  },
  methods: {
    showLine() {
      const query = uni.createSelectorQuery().in(this);
      query.selectAll(".tab-item").boundingClientRect((rects) => {
        // console.log("得到布局位置信息" + JSON.stringify(rects));
        // console.log("节点离页面左边的距离为" + rects.left);
        if (rects.length > 0) {
          const activeRect = rects[this.activeIndex];
          this.underlineStyle = {
            left: `${activeRect.left + 18}rpx`,
            transform: `translateX(${activeRect.left + 18}rpx)`
          }
        }
      }).exec();
    },
    updateTabbar(e) {
      this.tabbarIndex = e
    },
    changeTab(index) {
      this.activeIndex = index;
      this.$nextTick(() => {
        setTimeout(() => this.showLine(), 100);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20rpx;
}

.tabs {
  display: flex;
  position: relative;

}

.tab-item {
  color: #999;
  padding: 10rpx 20rpx;
  font-size: 27rpx;
  transition: all .3s;
  letter-spacing: 4rpx;

  &.active {
    color: #000;
    font-weight: bold;
  }
}

.tab-line {
  position: absolute;
  bottom: -4rpx;
  right: 0;
  width: 40rpx;
  height: 6rpx;
  background-color: #CFF276;
  transition: all 0.3s ease;
}
</style>
